<template>
  <div>
    <div class="myRobot myRobotDataAnalysis">
      <robotNav></robotNav>
      <div class="myRobotRight">
        <div class="myRobotDataAnalysis_list">
          <div class="myRobotDataAnalysis_list_title">
            <div class="list_title_dd">使用分析</div>
            <div class="list_title_dt">
              <div class="title_dt_time">
                <div class="dt_time_li notBlue" :class="{ active: activeTab === 1 }" @click="changeTab(1)">昨天</div>
                <div class="dt_time_li notBlue" :class="{ active: activeTab === 2 }" @click="changeTab(2)">今天</div>
                <div class="dt_time_li notBlue" :class="{ active: activeTab === 3 }" @click="changeTab(3)">最近一周</div>
                <div class="dt_time_li notBlue" :class="{ active: activeTab === 4 }" @click="changeTab(4)">上个月</div>
              </div>
              <el-date-picker
                v-model="timeRange"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div class="myRobotDataAnalysis_list_content">
            <div class="list_content_li">
              <div class="content_li_title"><span></span>对话统计</div>
              <div class="content_li_txt">
                <div class="li_txt_l">
                  <div class="txt_l_dd">对话次数</div>
                  <div class="txt_l_dt">{{ data.chat_count }}</div>
                  <div class="txt_l_p">总计有多少用户发起对话</div>
                  <div class="txt_l_icon"><img src="@a/img/sv80.svg"/></div>
                </div>
                <div class="li_txt_l">
                  <div class="txt_l_dd">消息条数</div>
                  <div class="txt_l_dt">{{ data.message_count }}</div>
                  <div class="txt_l_p">用户发送的消息总计</div>
                  <div class="txt_l_icon"><img src="@a/img/sv81.svg"/></div>
                </div>
                <div class="li_txt_l notBlue" @click="ContactInformation = !ContactInformation">
                  <div class="txt_l_dd">联系人</div>
                  <div class="txt_l_dt">{{ data.event_count }}</div>
                  <div class="txt_l_p">留下联系信息的用户</div>
                  <div class="txt_l_icon"><img src="@a/img/sv82.svg"/></div>
                </div>
              </div>
            </div>
            <div class="list_content_li">
              <div class="content_li_title"><span></span>用户评价统计</div>
              <div class="content_li_txt">
                <div class="li_txt_l">
                  <div class="txt_l_dd">好评</div>
                  <div class="txt_l_dt">{{ data.like_count }}</div>
                  <div class="txt_l_p">用户对回答的结果满意点赞</div>
                  <div class="txt_l_icon"><img src="@a/img/sv68.svg"/></div>
                </div>
                <div class="li_txt_l">
                  <div class="txt_l_dd">差评</div>
                  <div class="txt_l_dt">{{ data.unlike_count }}</div>
                  <div class="txt_l_p">用户对回答的结果不满意点踩</div>
                  <div class="txt_l_icon"><img src="@a/img/sv69.svg"/></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="myRobotDataAnalysis_list">
          <div class="myRobotDataAnalysis_list_title">
            <div class="list_title_dd">知识库统计</div>
          </div>
          <div class="myRobotDataAnalysis_list_content">
            <div class="list_content_li">
              <div class="content_li_txt">
                <div class="li_txt_l">
                  <div class="txt_l_dd">知识内容字数</div>
                  <div class="txt_l_dt">{{ data.word_count }}</div>
                  <div class="txt_l_p">知识库文字数量统计</div>
                  <div class="txt_l_Progress">
                    <el-progress type="circle" :percentage="data.word_percent" :stroke-width="10" color="#3462eb" ></el-progress>
                  </div>
                </div>
              </div>
            </div>
            <div class="list_content_li">
              <div class="content_li_title"><span></span>数据源统计</div>
              <div class="content_li_txt">
                <div class="li_txt_l">
                  <div class="txt_l_dd">网页</div>
                  <div class="txt_l_dt">{{ data.url_count }}</div>
                  <div class="txt_l_p">知识库总计包含网页数量</div>
                  <div class="txt_l_icon"><img src="@a/img/sv83.svg"/></div>
                </div>

                <div class="li_txt_l">
                  <div class="txt_l_dd">文件</div>
                  <div class="txt_l_dt">{{ data.file_count }}</div>
                  <div class="txt_l_p">知识库总计包含文件数量</div>
                  <div class="txt_l_icon"><img src="@a/img/sv85.svg"/></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!-- 联系人信息 -->
    <div class="alRobotWindow ContactInformation" v-show="ContactInformation">
      <div class="alRobotWindow_content">
        <div class="alRobotWindow_content_title">
          <div class="content_title_left"><span></span>联系人信息</div>
          <div class="content_title_right" @click="ContactInformation = !ContactInformation"><i class="el-icon-close"></i></div>
        </div>
        <div class="ContactInformation_content">
          <div class="ContactInformation_content_nav">
            <div class="content_nav_left">
              <div class="nav_left_list notBlue" @click="event_id = group.event_id" :class="{ active: group.event_id === event_id }" v-for="(group,index) in groups">
                <span><img src="@a/img/sv108.svg"/><img src="@a/img/sv108on.svg"/></span>
                {{ group.form_name }}<b>({{ group.count }})</b>
              </div>

            </div>
          </div>
          <div class="ContactInformation_content_tab" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中" element-loading-background="rgba(255, 255, 255, 1)">
              <div class="content_tab_list">
                <div class="tab_list_li">留言时间</div>
                <div class="tab_list_li">留言表单</div>
                <div class="tab_list_li">留言内容</div>
                <div class="tab_list_li">对话</div>
              </div>
              <div class="ovauto">
                <div class="content_tab_list" v-for="(event, index) in data.events" v-if="event_id === event.event_id || event_id === 0">
                  <div class="tab_list_li">{{ event.answer_time_str }}</div>
                  <div class="tab_list_li">{{ event.event_details.form_name }}</div>
                  <div class="tab_list_li">
                    <p v-for="(field, index) in event.user_submission">{{ index }}：{{ field }}</p>
                  </div>
                  <div class="tab_list_li"><a :href="'/#/alRobot/myRobotUserDialog/myRobotUserDialog?chat_id=' + event.robot_conversation_id" target="_blank">查看</a></div>
                </div>

              </div>

          </div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
    import robotNav from "@c/common/robotNav/robotNav";
    import {timeRange} from "@/utils/timeRange";
    import {api} from "@/api-js";



    export default {
        data() {
            return {
              ContactInformation: false,
				      activeTab: 0,
              loading: true,
              data: [],
              timeRange: ['',''],
              groups: [],
              event_id: 0,
            };
        },
        components: {
          robotNav
        },
        methods:{
          changeTab(index) {
            this.activeTab = index;
            if(index === 1){
              this.timeRange = timeRange.yesterday;
            }
            if(index === 2) {
              this.timeRange = timeRange.today;
            }
            if(index === 3){
              this.timeRange = timeRange.lastWeek;
            }
            if(index === 4){
              this.timeRange = timeRange.lastMonth;
            }
            this.getData();
          },
          async getData(){
            this.loading = true;
            const [e, r] = await api.robot.getStatus({
              robot_id: this.$store.getters.robotId,
              start_time: this.timeRange[0],
              end_time: this.timeRange[1],
            })
            this.loading = false;
            if(!e && r) {
              this.data = r.result
              const groupedData = this.data.events.reduce((acc, item) => {
                const { event_id, event_details } = item;
                const { form_name } = event_details;

                // Check if the event_id already exists in the accumulator
                if (acc[event_id]) {
                  acc[event_id].count++;
                } else {
                  acc[event_id] = {
                    count: 1,
                    form_name: form_name
                  };
                }

                return acc;
              }, {});
              const groupedArray = Object.entries(groupedData).map(([event_id, values]) => ({
                event_id: Number(event_id),
                count: values.count,
                form_name: values.form_name
              }));
              this.groups = groupedArray;
              this.groups.unshift({
                event_id: 0,
                count: this.data.events.length,
                form_name: '全部'
              })
            }
          }
        },
        mounted() {
          this.getData();
        },
    }
</script>


<style>
@import "myRobotDataAnalysis.css";
</style>
